<template>
  <div style="width: 82.5%;margin-left: 8.8%">
    <div>
      <el-row style="margin-left: 20%">
        <el-col :span="4" style="margin: 0 5px 0 3px">
          <a href="javascript:void(0)" onclick="sortById()">
            综合排序</a></el-col>
        <el-col :span="1">
        </el-col>
        <el-col :span="4" style="margin: 0 3px 0 5px">
          <a href="javascript:void(0)" onclick="sortByNums()">
            销量<i class="el-icon-caret-bottom"></i></a></el-col>
        <el-col :span="1">
        </el-col>
        <el-col :span="4" style="margin: 0 5px 0 5px">
          <a href="javascript:void(0)" onclick="sortByComment()">
            好评<i class="el-icon-caret-bottom"></i></a></el-col>
        <el-col :span="1">
        </el-col>
        <el-col :span="4" style="margin: 0 5px 0 5px">
          <a href="javascript:void(0)" onclick="sortByTime()">
            出版时间<i class="el-icon-caret-bottom"></i></a></el-col>
        <el-col :span="1">
        </el-col>
        <el-col :span="4" style="margin: 0 5px 0 5px">
          <a href="javascript:void(0)" onclick="sortByMoney()">
            价格<i class="el-icon-caret-bottom"></i></a></el-col>

      </el-row>

    </div>
    <el-divider></el-divider>
    <div>
      <el-row>
        <el-col style="margin: 10px 0" span="6" v-for="p in productArr">
          <el-card style="margin: 10px 20px">
            <img class="p_img" :src="p.url" width="100%">
            <div>
              <p style="font-size: 15px;height: 40px;margin-top: 0">
                {{ p.goodsName }}
              </p>

              <p style="font-size: 12px;color: #666">
                价格:{{ p.money }} 库存:{{ p.num }}
              </p>
              <p style="font-size: 12px;color: #666">
                出版社:{{ p.pressName }}
              </p>
              <p style="font-size: 12px;color: #666">
                <span>销量:{{ p.nums }}件</span>

              </p>
              <el-button type="primary" onclick="an()">查看详情</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productArr: {
        url:'',
        goodsName:'',
        money:'',
        num:'',
        pressName:'',
        nums:''
      },
      //isActive: {} //0综合排序，1销量，2评论，3出版时间4价格降序5价格升序
    }
  },
  methods: {
    sortById() {

      console.log('searchListById');
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchListById';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },
    sortByNums() {

      console.log('searchListByNums');
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchListByNums';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },
    sortByComment() {

      console.log('loadSearchList');
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchListByComments';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },
    sortByTime() {

      console.log('searchListByHouseTime');
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchListByHouseTime';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },
    sortByMoney() {

      console.log('searchListByMoney');
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchListByMoney';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },
    an() {
    },
    loadSearchList() {
      console.log('loadSearchList');
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchList';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    }
  },
  mounted() {
    this.loadSearchList();
  }
}
</script>

<style>
* {
  margin: 0;
}

.p_img:hover {
  position: relative;
  top: 5px;
  /* 设置元素阴影 :  x偏移值  y偏移值  浓度(值越大越模糊)  范围  颜色 */
  box-shadow: 0 0 10px 5px #333;
}

p {
  margin: 4px 4px;
}
</style>